<template>
  <div class="eighteenpie">
    <v-chart :options="newOption" :auto-resize="true" @click="goEighteenPage" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { EChartOption } from "echarts";
import { component } from "vue/types/umd";
//loadsh
import lodash from "lodash";
interface dataList {
  name: string;
  value: string;
}
let colorList: Array<string> = ["#CA3834", "#CD7A26", "#115AD6"];
@Component
export default class EighteenPie extends Vue {
  @Prop({ default: () => [] })
  annualStatistics: Array<string> | undefined;
  public dataList: dataList[] = [
    {
      name: "2019年计划",
      value: "40",
    },
    {
      name: "2020年计划",
      value: "30",
    },
    {
      name: "2021年计划",
      value: "20",
    },
  ];
  public option: EChartOption = {
    legend: {
      orient: "vertical",
      bottom: "10%",
      left: "10%",
      data: this.dataList,
      textStyle: {
        color: "#fff",
        fontSize: 16,
      },
    },
    color: colorList,
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        name: "计划",
        type: "pie",
        radius: ["30%", "60%"],
        center: ["40%", "40%"],
        // roseType: "radius", //玫瑰图
        label: {
          position: "inside",
          fontSize: 14,
          formatter: "{c}",
        },
        data: [],
      },
    ],
  };

  // 跳转到十八项反措二级页面
  private goEighteenPage(v: any) {
    console.log("v:",v);
    this.$router.push({
      name: "countermeasuresindex",
      query: {
        year: v.name,
      },
    });
  }

  get newOption() {
    let option = lodash.cloneDeep(this.option);
    let robotInspection = this.annualStatistics;
    var dataList = [];
    robotInspection.map((v: any, i: number) => {
      let obj = {
        name: v.time + "年计划",
        value: v.count,
      };
      dataList.push(obj);
    });
    (option as any).series[0].data = dataList;
    (option as any).legend.data = dataList;
    return option;
  }
}
</script>

<style lang="scss" scoped>
.eighteenpie {
  width: 100%;
  height: 100%;
  display: flex;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>